<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的响应式网站</title>
    <style>
        body { padding-top: 70px;}
        td   {border: 1px solid;
            border-color: #5bc0de;
        }
    </style>
<!--    <link rel="stylesheet" href="../css/bootstrap.css">-->
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

</head>
<body>

<div class="container-fluid" style="display: block;position: relative">
    <nav id="MyWeb">
        <div class="fixed-top">
            <div class="container">
                <div class="navbar-header">
                    <nav class="navbar navbar-expand-lg navbar-light bg-light">
                        <a class="navbar-brand" href="#MyWeb">我的响应式网站</a>
                            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#lx6navBar" aria-controls="lx6navBar" aria-expanded="false" aria-label="Toggle navigation" >
                                <span class="navbar-toggler-icon"></span>
                            </button>
                    <div class="collapse navbar-collapse" id="lx6navBar">
                        <ul class="navbar-nav">
                            <li><a class="nav-link" href="#99mul">九九乘法表</a></li>
                            <li><a class="nav-link" href="#famousScientists">物理学家简介</a></li>
                            <li><a class="nav-link" href="#contactUs">联系方式</a></li>
                        </ul>
                    </div>
                    </nav>
                </div>
            </div>
        </div>
    </nav>
</div>

<div class="container-fluid" style="display: block;position: relative">
    <h3 align="center">九九乘法表</h3>
    <div id="99mul">
        <div id="first" style="display: block">
            <script type="text/javascript">
                document.write("<table align='center'>");
                for(a=1;a<=9;a++){
                    document.write("<tr>");
                for(b=1;b<=a;b++){
                    document.write("<td>");
                    document.write("&nbsp"+a+"*"+b+"="+a*b+"&nbsp;&nbsp");
                    document.write("</td>");
                }
                document.write("</tr>")
                }
                document.write("</table>");
            </script>
        </div>
        <div id="second" style="display: none">
            <script type="text/javascript">
                for(let a=1;a<=9;a++){
                    document.write("<table align='center'>");
                    document.write("<tr>");
                    for(let b=1;b<=a;b++){
                        document.write("<td style='text-align: center;column-span: 4'>");
                        document.write("&nbsp"+a+"*"+b+"="+a*b+"&nbsp;&nbsp");
                        document.write("</td>");
                    }
                    document.write("</tr>");
                }
                document.write("</table>");
            </script>
        </div>
        </div>
        <div align="center">
            <button type="button" class="btn btn-info" onclick="mySwitch()">切换</button>
            <script type="text/javascript">
                function mySwitch() {
                    if(document.getElementById("first").style.display=="block"){
                        document.getElementById("first").style.display="none"
                        document.getElementById("second").style.display="block"
                    }else {
                        document.getElementById("second").style.display="none"
                        document.getElementById("first").style.display="block"
                    }
                }
            </script>
        </div>
    </div>
</div>

<div class="container-fluid" style="display: block;position: relative">
    <div id="famousScientists">
        <div align="center">
           <p><br> <h3>物理学家简介</h3></p>
        </div>
        <div class="row">
            <div class="col-md-1"></div>
            <div class="col-md-5 col-xs-12">
                <div class="card">
                    <div class="card-body" align="center">
                        <a><h1>特斯拉</h1></a>
                        <img src="../tsl.jpg" alt="Tsl" class="img-responsive">
                            <p>
                                尼古拉·特斯拉（Nikola Tesla，1856年7月10日—1943年1月7日），塞尔维亚裔美籍发明家、物理学家、机械工程师。
                           </p>
                    </div>
                </div>
            </div>
            <div class="col-md-5 col-xs-12">
                <div class="card">
                    <div class="card-body" align="center">
                        <a><h1>牛顿</h1></a>
                        <img src="../newton.PNG" alt="Newton" class="img-responsive">
                        <p>
                            艾萨克·牛顿（1643年1月4日—1727年3月31日）爵士，英国皇家学会会长，英国著名的物理学家，百科全书式的“全才”
                            他在1687年发表的论文《自然定律》里，对万有引力和三大运动定律进行了描述。这些描述奠定了此后三个世纪里物理世界
                            的科学观点，并成为了现代工程学的基础。他通过论证开普勒行星运动定律与他的引力理论间的一致性，展示了地面物体与天体
                            的运动都遵循着相同的自然定律；为太阳中心说提供了强有力的理论支持，并推动了科学革命。
                            在数学上，牛顿与戈特弗里德·威廉·莱布尼茨分享了发展出微积分学的荣誉。
                      </p>
                    </div>
                </div>
            </div>
            <div class="col-md-1"></div>
            <div class="col-md-1"></div>
            <div class="col-md-5 col-xs-12">
                <div class="card">
                    <div class="card-body" align="center">
                        <a><h1>莱布尼茨</h1></a>
                        <img src="../lbnc.jpg" alt="Lbnc" class="img-responsive">
                        <p>
                            戈特弗里德·威廉·莱布尼茨（Gottfried Wilhelm Leibniz，1646年7月1日－1716年11月14日），德国哲学家、数学家.
                      <br>
                        </p>
                    </div>
                </div>
            </div>
            <div class="col-md-5 col-xs-12">
                <div class="card">
                    <div class="card-body" align="center">
                        <a><h1>爱迪生</h1></a>
                        <img src="../ads.jpg" alt="ads" class="img-responsive">
                        <p>
                            托马斯·阿尔瓦·爱迪生（Thomas Alva Edison，1847年2月11日—1931年10月18日），出生于美国俄亥俄州米兰镇.
                            爱迪生是人类历史上第一个利用大量生产原则和电气工程研究的实验室来进行从事发明专利而对世界产生深远影响的人。
                            他发明的留声机、电影摄影机和电灯对世界有极大影响。
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="clear"></div>
</div>
</div>
<div class="g">
   
    <div class="fang"><dl>
        <h1>联系方式</h1>
        <dd>地址：河南省信阳时浉河区南湖路237号</dd>
        <dd>邮编：454000</dd>
        <dd>网址：http://www.xynu.edu.cn/</dd>
        <dd>网址：http://www.xynu.edu.cn/</dd>
        <dd>电话：12345678910</dd>
    </dl></div>
<div id="contactUs">
    </div>><br/>
    <div align="center">
    </div>
    <div class="online">
        <h1>在线提问</h1>
        <table width="500">
            <tr>
                <td>姓名</td>
                <td><input type="text"></td>
            </tr>
            <tr>
                <td>电子邮箱</td>
                <td><input type="text"></td>
            </tr>
            <tr>
                <td>submit</td>
                <td><textarea rows="5" cols="20"></textarea></td>
            </tr>
            <tr>
                <td><input type="button" value="submit"></td>
            </tr>
        </table>
    </div>
</div>


<script src="../js/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.15.0/umd/popper.min.js" integrity="sha384-L2pyEeut/H3mtgCBaUNw7KWzp5n9+4pDQiExs933/5QfaTh8YStYFFkOzSoXjlTb" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

</body>
</html>
